<template>
    <div class="login-container" v-cloak style="background-image: url('../../static/image/splash2.jpg')">
        <div class="form">
            <input type="tel" class="tel" placeholder="手机号" maxlength="11" v-model.trim="formData.UserName" @click="handleFocus" style="background: url('../../static/image/login_tel2.png') no-repeat left center;">
            <input type="password" class="pwd" placeholder="密码" v-model.trim="formData.Password" @click="handleFocus" style="background: url('../../static/image/login_pwd2.png') no-repeat left center;">
            <div class="btns">
                <button class="login-btn" @click="login">登录</button>
            </div>
            <a class="forgot-pwd" @click="forget">忘记密码？</a>
        </div>
    </div>
</template>

<script>
import $ui from '@lib/ui'
import { passApi } from '@lib/Api'
import $http from '$http'
export default {
    data () {
        return {
            formData: {
                UserName: '',
                Password: ''
            }
        };
    },

    mounted() {
        setTimeout(() => {
            this.init();
        }, 50);
    },

    methods: {
        async init() {
            
            try{
                const { res, err } = await $http.req(passApi.login1, null, {
                    UserName: '11066660029',
                    Password: '123456',
                    from: 1
                } , true, false, true);

                console.log(res.Secret);
            } catch(err) {
                console.log(err);
            }
            

            
        },
        forget() {
            
        },
        login() {
            $ui.openMain();
        },
        handleFocus(e) {
             e.target.focus();
        }
    }

};

</script>
<style lang='stylus'>
input::-webkit-input-placeholder
    color: #50C1D3;
    letter-spacing: 1px;

input:-moz-placeholder
    color: #50C1D3;
    letter-spacing: 1px;

input::-moz-placeholder
    color: #50C1D3;
    letter-spacing: 1px;

input:-ms-input-placeholder
    color: #50C1D3;
    letter-spacing: 1px;

body
    margin 0px
    padding 0px
    
.login-container
    width 100vw
    height 100vh
    overflow hidden
    display flex
    flex-direction column
    justify-content flex-end
    background-size cover
    background-repeat no-repeat
    background-position center

.form
    padding: 0 40px 20px;
    font-size: 0;

.form input
    width: 100%;
    height: 96px;
    line-height: 96px;
    line-height: normal;
    border-bottom: 1px solid #50C1D3;
    border-radius: 0;
    padding-left: 70px;
    font-size: 32px;
    vertical-align: top;
    outline: none;
    -webkit-appearance: none;
    color: #50C1D3;

.tel
    margin-top: 150px;
    background-size: 33px 53px!important;

.pwd
    margin-top: 28px;
    background-size: 36px 41px!important;

.btns
    display: flex;
    justify-content:flex-end;

    width: 100%;
    height: 78px;
    line-height: 78px;
    margin: 58px 0 0;
    padding: 0;

.login-btn
    display block
    width: 100%;
    height: 78px;
    padding: 0;
    line-height: 78px;
    font-size: 32px;
    border-radius: 14px;
    text-align: center;
    outline: none;
    background: #50C1D3;
    color: #ffffff;

.login-btn:active
    background: #2f7560;
    color: #acacac;

.forgot-pwd
    display: block;
    margin-top: 20px;
    padding: 20px 0;
    width: 100%;
    font-size: 26px;
    color: #50C1D3;
    text-align: center;

.forgot-pwd:active
    color: #acacac;
</style>